<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>教学网站</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            font-size: 13px;
        }
        
        #top {
            width: 1000px;
            height: 190px;
            margin-left: auto;
            margin-right: auto; 
            background-image: url(./img/top.jpg);
        }
        
        .menu {
            width: 1000px;
            height: 35px;
            padding-top: 155px;
        }
        
        li {
            width: 120px;
            float: left;
            position: relative;
        }
        
        .menu table {
            position: absolute;
            /*table相对于父容器li的绝对定位*/
            top: 35px;
            left: 0;
            /* 列表菜单与主菜单项的距离*/
        }
        
        a {
            display: block;
            line-height: 35px;
            text-align: center;
            color: #333;
            text-decoration: none;
        }
        
        a:hover {
            color: #fff;
            background-image: url(./img/navhover.png)
        }/*伪类选择器 鼠标放在汉字上可以出现图片*/
        
        li {
            list-style-type: none;
        }
        
        .first {
            display: block;
            line-height: 35px;
            text-align: center;
            color: #fff;
            text-decoration: none;
            background-image: url(./img/navhover.png);
            font-size: 16px;
        }/*锁定首页为橙色*/
        
        .menu li ul {
            width: 120px;
            visibility: hidden;
            position: absolute;
            text-align: left;
            left: 0px;
            top: 0;
            background-color: #DBDBDB;
        }
   
        .menu li ul li {
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid #999;
            font-size: 14px;
        }
   
        .menu li:hover ul {
            visibility: visible;
            /*菜单项在鼠标移至超链接上时可见*/
        }
        
        .menu li ul li a {
            display: block;
            width: 120px;
            height: 35px;
            line-height: 35px;
            color: #666;
            text-decoration: none;
        }
        
        .menu li ul li a:hover {
            background-image: none;
            background-color: #FF981D;
            line-height: 35px;
        }
		* {
		    margin: 0px;
		    padding: 0px;
		}
		
		#container {
		    margin-left: auto;
		    margin-right: auto;
		    margin-top: 10px;
		    border: 2px dashed skyblue;
		    width: 330px;
		    height: 170px;
		    background-color: #ECF3FB;
		}
		
		.header {
		    margin-top: 15px;
		    text-align: center;
		}
		
		.textarea {
		    text-align: center;
		    margin-top: 2px;
		}
		
		p {
		    margin-top: 6px;
		}
		
		.buttom {
		    text-align: center;
		    margin-top: 10px;
		}
		
		#footerDiv{
			width: 500px;height: 70px;
			line-height: 70px;
		}
    </style>
</head>
 
<body>
    <div id="top">
        <div class="menu">
            <li><a href="#" class="first">首页</a></li>
            <li><a href="#">Web前端开发</a></li>
            <li><a href="#">.NETWeb</a></li>
			
            <li><a href="#">Java大方向<table><tr><td>
                    <ul>
                        <li><a href="#">Java桌面应用</a></li>
            <li><a href="#">Java EE(Web)</a></li>
            <li><a href="#">Android(Eclipse 版)</a></li>
            <li><a href="#">Android(Studio 版)</a></li>
            </ul>
            </td>
            </tr>
            </table>
            </a>
            </li>
			<!--把这些当成一个整体-->
			
            <li><a href="#">PHP网站开发<table><tr><td>
                    <ul>
                        <li><a href="#">PHP网站开发</a></li>
            <li><a href="#">使用ThinkPHP框架</a></li>
            </ul>
            </td>
            </tr>
            </table>
            </a>
            </li>
            <li><a href="#">Web信息检索</a></li>
            <li><a href="#">其它相关课程<table><tr><td>
                    <ul>
                        <li><a href="#">大学计算机基础</a></li>
            <li><a href="#">C语言程序设计</a></li>
            <li><a href="#">数据库原理与应用</a></li>
            <li><a href="#">数据结构</a></li>
            <li><a href="#">计算机网络技术</a></li>
            <li><a href="#">本科毕业设计</a></li>
            </ul>
            </td>
            </tr>
            </table>
            </a>
            </li>
        </div>
    </div>
	<div id="container">
	
	    <div class="header">
	        <h2>用户登录</h2>
	    </div>
	
	    <div class="textarea">
	        <p>用户名：<input type="text" name="accountname">
	            <p>密&emsp;码：<input type="password" name="paw">
	    </div>
	
	    <div class="buttom">
            <input type="image" src="./img/user%20(1).jpg" value="登录" />
            <input type="image" src="./img/pwd.jpg" value="注册" />
<!--            <input type="image" src="../ch02/img/sign up.png" value="注册" />-->
	    </div>
	
	</div>
	<div id="footerDiv" align="center">技术支持</div>
</body>

</html>